<template>
  <q-list :class="listClassName">
    <q-banner v-if="inDrawer" class="text-center ">
      <div class="text-h6">Best Seller</div>
    </q-banner>

    <q-item
      v-for="item in list"
      :key="item.title"
      :class="listItemClassName"
      clickable
      v-ripple
      :to="item.link"
      active-class
    >
      <q-item-section>{{ item.title }}</q-item-section>
    </q-item>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';

interface IListItem {
  title: string;
  link: string;
  icon: null | string;
}

export default defineComponent({
  name: 'HomeNvBarList',
  props: {
    direction: {
      type: String,
      required: true
    },
    inDrawer: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array as () => IListItem[],
      required: true
    }
  },
  setup(props) {
    const listClassName = computed(() =>
      props.inDrawer
        ? 'text-subtitle1 text-weight-regular'
        : 'text-subtitle1 text-weight-bold navbar-list-container'
    );

    const listItemClassName = computed(() =>
      props.inDrawer ? 'q-px-xl q-py-md' : 'float-left'
    );

    return {
      listClassName,
      listItemClassName
    };
  }
});
</script>
<style lang="sass"></style>
